<template>
	<view class="search-result-page">
		<custom-header title="搜索结果"></custom-header>

		<!-- 搜索框 -->
		<view class="search-bar">
			<view class="search-left">
				<image src="../../static/images/ic_search_black.png"
					style="height: 32rpx; width: 32rpx; margin-left: 24rpx; margin-right: 8rpx;"></image>
				<input style="flex: 1; background-color: #F7F8FA;" placeholder="请输入需要回收的卡券名称" v-model="searchText" type="text"
					@confirm="onSearch"></input>
				<image src="../../static/images/ic_clear_input.png"
					style="height: 32rpx; width: 32rpx; margin-right: 16rpx;" @click="clearInput"></image>
			</view>

			<view type="primary" class="search-button" @click="onSearch">搜索</view>
		</view>

		<!-- 搜索结果列表 -->
		<view class="card-list-container">
			<view v-for="(item, index) in searchResults" :key="index" class="card-item">
				<!-- 左侧运营商信息 -->
				<view class="card-info">
					<image class="card-logo" :src="item.mimg" mode="aspectFit"></image>
					<view>
						<view class="card-name">{{ item.name }}</view>
						<view class="card-dis">
							<text style="padding: 8rpx; background-color: #F90808; color: white;">高</text>
							<text style="margin: 4rpx;">最高{{item.maxDiscount}}折</text>
						</view>
						<view class="card-type">{{item.prodTypeName}}</view>
					</view>
				</view>

				<!-- 右侧操作区 -->
				<view class="sell-btn" @click="handleSell(item.prodTypeId, item.id)">卖卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				searchResults: [],
				imgHost: ''
			}
		},
		onLoad(options) {
			this.imgHost = this.$app.imgApiHost;
			if (options) {
				// 获取传递的参数
				this.searchText = decodeURIComponent(options.query);
				console.log("搜索内容" + this.searchText)
				// 自动填充搜索框
				this.onSearch();
			}

		},
		methods: {
			async onSearch() {
				const res = await this.$http({
					method: 'GET',
					url: '/product/product/list',
					data: {
						prodName: this.searchText
					}
				});
				if (res) {
					this.searchResults = res.data
				}
			},
			clearInput(){
				this.searchText = '';
			},
			// 去销卡
			handleSell(selectedId, cardId) {
				uni.navigateTo({
					url: `/pages/sale-card/sale-card?typeId=${selectedId}&cardId=${cardId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-result-page {
		height: 100vh;
		width: 100vw;
		background-color: #F7FAFF;
	}

	.search-bar {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		.search-left {
			flex: 1;
			height: 72rpx;
			display: flex;
			align-items: center;
			background-color: #F7F8FA;
			border-radius: 36rpx;
		}

		.search-button {
			margin-left: 16rpx;
			font-size: 32rpx;
			color: #323233;
		}
	}

	.card-list-container {
		padding: 0 32rpx;

		//列表
		.card-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;

			.card-info {
				display: flex;
				align-items: center;

				.card-logo {
					width: 120rpx;
					height: 120rpx;
					margin-right: 32rpx;
				}

				.card-name {
					font-size: 28rpx;
					color: #000;
					font-weight: 700;
					margin-bottom: 4rpx;
				}

				.card-dis {
					display: inline-block;
					align-items: center;
					border: #F90808 solid 2rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-bottom: 4rpx;
					font-size: 20rpx;
				}

				.card-type {
					color: rgba(0, 0, 0, 0.54);
					font-size: 24rpx;
				}
			}

			.sell-btn {
				padding: 6rpx 42rpx;
				background-color: #4D7EF4;
				color: white;
				font-size: 28rpx;
				border-radius: 32rpx;
			}
		}
	}
</style>